<script setup lang="ts">
import { onMounted, ref } from 'vue'
import warnImg from '@/assets/bit-screen/monitor/warnImg.png'

import openPanel from '@/assets/bit-screen/monitor/openPanel_R.png'
import closePanel from '@/assets/bit-screen/monitor/closePanel_R.png'
import { getWarningList } from '@/api/home/index'
interface I_Warn {
  name: string
  aname: string
  createTime: string
}

// const warnList = ref<I_Warn[]>([
//   { name: '无人机开机失败1', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败2', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败3', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败4', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败5', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败6', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败7', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败8', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败9', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败10', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败11', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败12', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败13', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败14', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败15', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败16', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败17', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败18', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败19', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败20', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败21', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败22', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败23', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败24', aname: '2号机场', createTime: '07.20 15:30:15' },
//   { name: '无人机开机失败25', aname: '2号机场', createTime: '07.20 15:30:15' },
 
// ])

const showList = ref([] as I_Warn[])

const drawer = ref(true)
const toggleDrawer = () => {
  drawer.value = !drawer.value
}
const page = ref(1)
const limit = ref(20)
const loading = ref(false)
const total=ref(0)
const count=ref(0)
const getWarnList = async () => {  
  if (loading.value) return;  
  if(page.value!==1&&showList.value.length>=total.value) return
  loading.value = true;  
  try {  
    const params = {  page: page.value, limit: limit.value,status:1 };  
    const res = await getWarningList(params);  
    if (res && res.data && res.data.records) {  
      showList.value = [...showList.value, ...res.data.records];  
      total.value=res.data.total
    }  
    page.value++;  
  } catch (error) {  
    console.error("Failed to load warning list:", error);  
  } finally {  
    loading.value = false;  
  }  
};

const load = () => {
  getWarnList()

}
</script>
<template>

  <img
    @click="toggleDrawer"
    :class="[drawer ? 'isOpen' : 'isClose']"
    v-if="!drawer"

    :src="openPanel"
    alt=""
  />
  <div class="rt-con" :class="[drawer ? 'rt-isOpen' : 'rt-isClose']">
    <img
      class="side-icon"
      @click="toggleDrawer"
      :class="[drawer ? 'isOpen' : 'isClose']"
      v-if="drawer"
      :src="closePanel"
      alt=""
  />
    <div class="title-box">近期预警</div>
    <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto" v-loading="loading">
      <li  v-for="(item, index) in showList" :key="index" class="infinite-list-item">
        <img class="img-left" :src="warnImg" alt="" />
        <div class="text-box">
          <p class="mb-8px font-medium">{{ item.name }}</p>
          <div class="text-bottom text-sm">
            <span class="text-[#de6868]"> {{ item.aname }}</span>
            |
            <span class="text-[#D9e4f2]">{{ item.createTime }}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<style lang="less" scoped>
:deep(.el-loading-mask){
  background-color: rgba(0, 42, 84, 0.2)!important
}
.rt-isClose {
  z-index: -1;
  position: absolute;
}
.rt-isOpen {
  width: 20%;
  z-index: 2001;
  top: 0px !important;
  height: 95%;
  box-shadow: none;
  background: rgba(0, 42, 84, 1);
  position: relative;
  margin-left: 25px;

}
:deep(.el-drawer.rtl.open) {
  background: rgba(0, 42, 84, 0.8);
}
:deep(.el-drawer__body) {
  padding: 0 !important;
}

.side-icon {
  position: absolute;
  left: -40px;
  z-index: 9999;
  bottom: 100px;
  border: 1px solid #0c6eba;
  border-radius: 6px 0px 0px 6px;
}
.isOpen {
  right: calc(19% + 33px);
  z-index: 9999 !important;
}
.isClose{
  position: absolute;
  right: -10px;
  bottom: 100px;
  border: 1px solid #0c6eba;
  border-radius: 6px 0px 0px 6px;

}

.rt-con {
  font-family: PingFang SC;

  .title-box {
    background: url('@/assets/bit-screen/schedule-mge/title_bg.png') center left;
    background-size: cover;
    padding-left: 40px;
    display: flex;
    align-items: center;
    height: 40px;
    margin-bottom: 10px;
    color: #d9e4f2;
  }
  .loadingBox{
    position: absolute;
    bottom: 0px;
    right: 50px;
  }
  .infinite-list {
    height: 93%;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
 
    border: 1px solid #52deff;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding: 17px 19px;
    .img-left {
      width: 38px;
      height: 38px;
      margin-right: 12px;
    }
  }
  .infinite-list .infinite-list-item + .list-item {
    margin-top: 10px;
  }
}
@media screen and (max-width: 1600px) {
  .rt-isOpen {
    width: 25%;
  }

}
</style>
